<template>
  <div>

    <div  class="search-container">
      <!-- 使用 el-row 和 el-col 布局 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="4">
          <label style="line-height: 40px;">请输入机构：</label>
        </el-col>
        <el-col :span="20">
          <el-select v-model="searchQuery" filterable placeholder="请选择或输入">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>



    <!-- 流程图部分 -->
    <div class="flow-container" ref="flowContainer">
      <!-- 节点 -->
      <div v-for="(node, index) in nodes" :key="index" :id="'node-' + (index+1)" class="node" :style="{backgroundColor: node.backgroundColor}">
        <div class="content">
          <div v-for="(line,lineIndex) in node.lines"  :key="lineIndex" class="line">
            <a   href="javascript:void(0);"  :title="line.text" :style="{color:line.textColor}" @click="navigate(line.text)"  class="link">{{line.text}}</a>
            <i :class = "line.icon" :style="{color:line.iconColor  ,position:'absolute',right: '10px'}"></i>/
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jsPlumb from 'jsplumb';

export default {
  data() {
    return {
      searchQuery: '',
      options:[],
      nodes: [
        {id: 'node-1',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
        {id: 'node-2',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
        {id: 'node-3',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
        {id: 'node-4',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
        {id: 'node-5',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
        {id: 'node-6',backGroundColor: '#a7c3f5' ,lines:[
            {text:"1 延期待扣款（100）",textColor:"black",icon:"",iconColor:""},
            {text:"有催收记录（70）",textColor:"black",icon:"el-icon-circle-check-outline",iconColor:"green"},
            {text:"无催收记录（70）",textColor:"red",icon:"el-icon-circle-check-close",iconColor:"red"},
            {text:"回款（70）",textColor:"red",icon:"el-icon-circle-check-check",iconColor:"green"},
          ]},
      ]
    };
  },
  created() {
    this.fetchOptions(); // 页面加载时调用接口获取数据

  },
  mounted() {
    this.initFlow();
  },
  methods: {
    initFlow() {
      const instance = jsPlumb.jsPlumb.getInstance();

      // 配置默认连接样式
      const connectionStyle = {
        stroke: '#5c96bc',
        strokeWidth: 2,
      };

      // 配置箭头样式
      const arrowStyle = {
        width: 12,
        length: 12,
        location: 1,
        direction: 1  // 箭头指向终点
      };

      // 配置端点样式，调整端点大小
      const endpointStyle = {
        radius: 4,  // 圆形端点的半径，调整为较小的值
        fill: '#5c96bc'  // 设置端点的颜色为红色
      };


      // 连接节点
      instance.connect({
        source: 'node-1',
        target: 'node-2',
        anchor: ['Right', 'Left'],
        connector: 'Straight',
        paintStyle: connectionStyle,
        overlays: [['Arrow', arrowStyle]],
        endpoint: 'Dot',  // 使用圆形端点
        endpointStyle: endpointStyle,  // 设置端点样式
        // 禁用右侧端点
        targetEndpoint: null,  // 不显示右侧目标端点
      });

      instance.connect({
        source: 'node-2',
        target: 'node-3',
        anchor: ['Right', 'Left'],
        connector: 'Straight',
        paintStyle: connectionStyle,
        overlays: [['Arrow', arrowStyle]],
        endpoint: 'Dot',  // 使用圆形端点
        endpointStyle: endpointStyle,  // 设置端点样式
      });

      instance.connect({
        source: 'node-3',
        target: 'node-4',
        anchor: ['Right', 'Left'],
        connector: 'Straight',
        paintStyle: connectionStyle,
        overlays: [['Arrow', arrowStyle]],
        endpoint: 'Dot',  // 使用圆形端点
        endpointStyle: endpointStyle,  // 设置端点样式

      });

      instance.connect({
        source: 'node-4',
        target: 'node-5',
        anchor: ['Bottom', 'Top'],
        connector: 'Straight',
        paintStyle: connectionStyle,
        overlays: [['Arrow', arrowStyle]],
        endpoint: 'Dot',  // 使用圆形端点
        endpointStyle: endpointStyle,  // 设置端点样式
        targetEndpoint: null  // 不显示右侧目标端点

      });

      instance.connect({
        source: 'node-5',
        target: 'node-6',
        anchor: ['Left', 'Right'],
        connector: 'Straight',
        paintStyle: connectionStyle,
        overlays: [['Arrow', arrowStyle]],
        endpoint: 'Dot',  // 使用圆形端点
        endpointStyle: endpointStyle,  // 设置端点样式
        targetEndpoint: null  // 不显示右侧目标端点
      });


    },
    handleSearch() {
      console.log('搜索关键词:', this.searchQuery);
      // 在这里处理搜索逻辑
    },
    navigate(text) {
      console.log("跳转参数:", text);
      this.$router.push({
        name: "/home",
        query: { param: text },
      });
    },
    },
    // 模拟调用后端接口获取选项数据
    fetchOptions() {
      // 假设这是从后端返回的数据
      setTimeout(() => {
        this.options = [
          { value: '01', label: '长沙' },
          { value: '02', label: '株洲' },
          { value: '03', label: '衡阳' }
        ];

        // 设置默认值
        this.setDefaultSelectedValue();
      }, 1000); // 模拟异步请求延迟
    },
    // 设置默认选中的值
    setDefaultSelectedValue() {
      // 假设我们需要设置默认值为 "option2"
      const defaultValue = '02';

      // 确保 options 已加载且包含该值
      if (this.options.some(option => option.value === defaultValue)) {
        this.searchQuery = defaultValue;
      }
    }
  }
};
</script>

<style scoped>
/* 搜索容器样式 */
.search-container {
  border: 1px solid #ccc; /* 边框颜色和宽度 */
  border-radius: 4px; /* 圆角边框 */
  padding: 10px; /* 内边距 */
  margin-bottom: 20px; /* 外边距 */
}

/* 标签样式 */
.search-label {
  line-height: 40px; /* 垂直居中对齐 */
  font-size: 14px; /* 字体大小 */
}

/* 可选：为布局组件设置一些样式 */
.el-row {
  align-items: center;
}

.flow-container {
  position: relative;
  height: 500px;
}

.node {
  width: 180px;
  height: 120px;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 10px;
  line-height: 20px;
  background-color: lightblue;
  border-radius: 5px;
  position: absolute;
}
.line{
  display:flex ;
  align-items: center;
  justify-content: flex-start;

}


.link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}
#node-1 { top: 10px; left: 10px; }
#node-2 { top: 10px; left: 300px; }
#node-3 { top: 10px; left: 600px; }
#node-4 { top: 10px; left: 900px; }
#node-5 { top: 200px; left: 900px; }
#node-6 { top: 200px; left: 600px; }

</style>
